<template>
    <div class="intank_properties">
        <div class="dateTimetab">
            <div v-for="(item,index) in timelist" :key="index" @click="itemvalue=index"
                 :class="itemvalue===index?'isclick':''">
                {{ item.name }}
            </div>
        </div>
        <div class="propertiesecharts">
            <chart-view :chart-option="EchartsMethods.tankproperties()" style="height: 100%;width: 100%" :auto-resize="true" width="100%" height="100%"></chart-view>
        </div>
        <div class="propertiesecharts">
            <chart-view :chart-option="EchartsMethods.combustible()" style="height: 100%;width: 100%" :auto-resize="true" width="100%" height="100%"></chart-view>
        </div>
    </div>
</template>

<script  lang="ts" setup>

import { EchartsMethods } from '@/chart/index';
import  ChartView from '@/chart/index.vue';
import {ref} from "vue";
const itemvalue = ref(0)
const timelist = ref(
    [
        {name: '30天'},
        {name: '近7日'},
        {name: '今日'},
        {name: '自定义'},
    ]
)
</script>

<style scoped lang="scss">

.dateTimetab {
    display: flex;

    > div {
        width: 80px;
        height: 24px;
        line-height: 24px;
        background: rgba(27, 147, 251, 0.2);
        text-align: center;
        margin-right: 8px;
        font-size: 14px;
        color: #FFFFFF;
    }

    .isclick {
        background: #1B93FB;
    }
}
.propertiesecharts{
    padding-top: 20px;
    height: 200px;
}
</style>